<!-- <template>
  <div id="map"></div>

  <dialog-component
    v-if="dialogVisible"
    @openClick="openClick"
    @openClose="openClose"
    @tabTitleClick="tabTitleClick"
    @tabClick="tabClick"
    :httpUrl="httpUrl"
    :tabsModelId="tabsModelId"
    :waterNameArr="waterNameArr"
    :videUrl="videUrl"
    :dialogVisible="dialogVisible"
  />
  <DiaogComponent1
    :pointDetail="pointDetail"
    @onClose="onClose"
    v-if="dialogVisible1"
  />
</template>

<script>
//导入相关配置信息
import DialogComponent from './DialogComponent.vue'
import DiaogComponent1 from './DiaogComponent1.vue'
import 'ol/css'
import XYZ from 'ol/source/XYZ' // 添加这行导入语句
import { defaults as defaultControls, FullScreen } from 'ol/control'
import Map from 'ol/Map'
import View from 'ol/View'
import TileLayer from 'ol/layer/Tile'
import Feature from 'ol/Feature'
import Point from 'ol/geom/Point'
import { Icon, Style, Text, Fill } from 'ol/style'
import { Vector as VectorLayer } from 'ol/layer'
import { Vector as VectorSource } from 'ol/source'
import Tile from 'ol/layer/Tile.js'
import { TileSuperMapRest } from '@supermap/iclient-ol'
import { water_factory_data } from './List/水厂点位list'
import { lngList } from './List/lng'
import {
  postConfiguration,
  postTrees,
  postOpenVideUrl,
  // deviceMap,
  // devCodeXq,
  singleDataSs,
} from '../http/http'
import proj4 from 'proj4'

export default {
  components: {
    DialogComponent,
    DiaogComponent1,
  },
  // name:"Map",
  data() {
    return {
      map: null,
      markers: [
        { lng: 118.674767, lat: 37.434751, iconUrl: 'icon_url_here' }, // 替换 'icon_url_here' 为图标的 URL
        // 可以添加更多的点位信息
      ],
      water_factory_data,
      lngList, // 设备检查信息
      dialogVisible: false,
      dialogVisible1: false,
      waterNameArr: [],
      httpUrl: '',
      videUrl: '',
      tabsModelId: '',
      // editableTabsValue: '1',
      waterNameActive: '',
      pointDetail: [], // 监测点数据
    }
  },
  created() {
    // getDeviceList().then((res) => {
    //   console.log(res, 'fffff')
    // })
    // console.log(
    //   this.lonLatToMercator(13229474.483915959, 4496594.767696529),
    //   'fffff'
    // )
  },
  mounted() {
    this.initMap()
  },
  methods: {
    initMap() {
      this.map = new Map({
        //1.创建地图对象 new Map()
        target: 'map', //2.绑定 div 元素
        layers: [
          //图层数组 layers
          new TileLayer({
            name: '天地图',
            source: new XYZ({
              crossOrigin: 'anonymous',
              url: 'https://t0.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=d6539c1747bf5296bfe35b02151d761a',
            }),
          }),
          new TileLayer({
            name: '注记',
            source: new XYZ({
              crossOrigin: 'anonymous',
              url: 'https://t0.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=d6539c1747bf5296bfe35b02151d761a',
            }),
          }),
        ],
        view: new View({
          //视图 View
          projection: 'EPSG:4326',
          center: [118.674767, 37.434751],
          zoom: 9,
        }),

        controls: defaultControls({
          //默认控件
          zoom: false,
          rotate: false,
          attribution: false,
          center: [118.281212, 37.557915],
        }).extend([
          //添加新控件
          new FullScreen(),
        ]),
      })

      const mapLayer = new Tile({
        visible: true,
        source: new TileSuperMapRest({
          url: 'http://10.204.170.214:8090/iserver/services/map-dy20240229/rest/maps/cspmpipe_ss?prjCoordSys=%7B%22epsgCode%22:4326%7D',
          wrapX: true,
          // projection: "EPSG:4326",
          crossOrigin: 'anonymous',
        }),
        projection: 'EPSG:4326',
      })
      const mapLayer1 = new Tile({
        visible: true,
        source: new TileSuperMapRest({
          url: 'http://10.204.170.214:8090/iserver/services/map-dy20240229/rest/maps/cspmpipe_jy?prjCoordSys=%7B%22epsgCode%22:4326%7D',
          wrapX: true,
          // projection: "EPSG:4326",
          crossOrigin: 'anonymous',
        }),
        projection: 'EPSG:4326',
      })
      this.map.addLayer(mapLayer)
      this.map.addLayer(mapLayer1)
      // 创建一个 VectorSource
      const vectorSource = new VectorSource()

      // 创建一个 VectorLayer，并将 VectorSource 添加到其中
      const vectorLayer = new VectorLayer({
        source: vectorSource,
      })

      // 定义墨卡托投影
      proj4.defs(
        'EPSG:3857',
        '+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext +no_defs'
      )
      // 定义经纬度投影
      proj4.defs('EPSG:4326', '+proj=longlat +datum=WGS84 +no_defs')
      // 定义显示和隐藏样式
      let hideStyle = new Style({
        image: new Icon({
          src: '/icon/流量监测点.png',
          scale: 0, // 缩放比例为 0，即隐藏图标
        }),
        text: new Text({
          visible: false, // 隐藏文本
        }),
      })

      // deviceMap().then((res) => {
      //   var lonlat = []
      //   let dataList = res.data
      //   // 流量点位
      //   dataList.Flow.forEach((item) => {
      //     lonlat = proj4('EPSG:3857', 'EPSG:4326', [
      //       +item.datamapx,
      //       +item.datamapy,
      //     ])
      //     const b = new Feature({
      //       geometry: new Point(
      //         [lonlat[0], lonlat[1]],
      //         [item.devicecode, 'flow', item.datapointname]
      //       ),
      //     })
      //     b.setStyle(hideStyle)
      //     vectorLayer.getSource().addFeature(b)
      //   })
      //   // 压力点位
      //   dataList.Pressure.forEach((item) => {
      //     lonlat = proj4('EPSG:3857', 'EPSG:4326', [
      //       +item.datamapx,
      //       +item.datamapy,
      //     ])
      //     const c = new Feature({
      //       geometry: new Point(
      //         [lonlat[0], lonlat[1]],
      //         [item.devicecode, 'pressure', item.datapointname]
      //       ),
      //     })
      //     c.setStyle(hideStyle)
      //     vectorLayer.getSource().addFeature(c)
      //   })
      //   // 水质点位
      //   dataList.WaterQuality.forEach((item) => {
      //     lonlat = proj4('EPSG:3857', 'EPSG:4326', [
      //       +item.datamapx,
      //       +item.datamapy,
      //     ])
      //     const d = new Feature({
      //       geometry: new Point(
      //         [lonlat[0], lonlat[1]],
      //         [item.devicecode, 'waterQuality', item.datapointname]
      //       ),
      //     })
      //     d.setStyle(hideStyle)
      //     vectorLayer.getSource().addFeature(d)
      //   })
      // })

      this.water_factory_data.features.forEach((v) => {
        var a = new Feature({
          geometry: new Point(
            [v.properties.lon, v.properties.lat],
            [v.properties.id, v.properties.name, 'waterPlant']
          ),
        })
        // 水厂icon样式
        a.setStyle(
          new Style({
            image: new Icon({
              src: '/icon/水厂.png',
              // size: [10, 10],
              scale: 0.3,
            }),
            text: new Text({
              text: v.properties.name,
              offsetY: 20, // 调整文本位置，使其显示在图标下方
              textAlign: 'center', // 文本水平居中
              font: '10px sans-serif', // 字体样式
              fill: new Fill({ color: 'black' }), // 文本颜色
            }),
          })
        )
        // // 为每个要素添加点击事件监听器
        // 为每个要素添加点击事件监听器
        vectorLayer.getSource().addFeature(a)
      })
      this.map.addLayer(vectorLayer)

      this.map.on('singleclick', (evt) => {
        if (this.map.hasFeatureAtPixel(evt.pixel)) {
          const feature = this.map.getFeaturesAtPixel(evt.pixel)
          var aa = ''
          var bb = ''
          aa = feature[0].values_.geometry.layout[2]
          bb = feature[0].values_.geometry.layout[1]
          if (aa === 'waterPlant') {
            let id = feature[0].values_.geometry.layout[0]
            this.waterNameActive = feature[0].values_.geometry.layout[1]
            this.dialogVisible = true
            postConfiguration({ configurationId: id }).then((res) => {
              this.httpUrl = res.data
            })
          } else if (
            bb === 'flow' ||
            bb === 'pressure' ||
            bb === 'waterQuality'
          ) {
            this.dialogVisible1 = true
            let deviceCode = feature[0].values_.geometry.layout[0]
            singleDataSs({ deviceCode }).then((res) => {
              this.pointDetail = res.data
            })
          }
        } else {
          console.log('点击的像素点上没有要素')
        }
      })
      // 监听地图的缩放事件
      this.map.on('moveend', () => {
        let zoom = this.map.getView().getZoom()
        let vectorSource = vectorLayer.getSource()
        let features = vectorSource.getFeatures()
        if (zoom >= 15) {
          features.forEach((feature) => {
            // 流量监测点icon样式
            if (feature.values_.geometry.layout[1] === 'flow') {
              feature.setStyle(
                new Style({
                  image: new Icon({
                    src: '/icon/流量监测点.png',
                    scale: 0.3, // 显示图标
                  }),
                  text: new Text({
                    text: feature.values_.geometry.layout[2], // 需要显示的文本内容
                    offsetY: 20, // 调整文本位置，使其显示在图标下方
                    textAlign: 'center',
                    font: '10px sans-serif',
                    fill: new Fill({ color: 'black' }),
                  }),
                })
              )
            }
            // 压力监测点icon样式
            if (feature.values_.geometry.layout[1] === 'pressure') {
              feature.setStyle(
                new Style({
                  image: new Icon({
                    src: '/icon/压力检测点.png',
                    scale: 0.3, // 显示图标
                  }),
                  text: new Text({
                    text: feature.values_.geometry.layout[2], // 需要显示的文本内容
                    offsetY: 20, // 调整文本位置，使其显示在图标下方
                    textAlign: 'center',
                    font: '10px sans-serif',
                    fill: new Fill({ color: 'black' }),
                  }),
                })
              )
            }

            // 水质监测点icon样式
            if (feature.values_.geometry.layout[1] === 'waterQuality') {
              feature.setStyle(
                new Style({
                  image: new Icon({
                    src: '/icon/水质检测点.png',
                    scale: 0.3, // 显示图标
                  }),
                  text: new Text({
                    text: feature.values_.geometry.layout[2], // 需要显示的文本内容
                    offsetY: 20, // 调整文本位置，使其显示在图标下方
                    textAlign: 'center',
                    font: '10px sans-serif',
                    fill: new Fill({ color: 'black' }),
                  }),
                })
              )
            }
          })
        } else {
          // 当地图缩放级别小于10时隐藏要素
          features.forEach((feature) => {
            if (
              feature.values_.geometry.layout[1] === 'flow' ||
              feature.values_.geometry.layout[1] === 'pressure' ||
              feature.values_.geometry.layout[1] === 'waterQuality'
            ) {
              feature.setStyle(hideStyle)
            }
          })
        }
      })
    },
    tabClick(value) {
      let pid = value.props.name.split('_')[1]
      this.postOpenVide(pid)
    },
    tabTitleClick(e) {
      if (e.props.name === '2') {
        postTrees().then((res) => {
          let luChen = res.data?.[0]?.[0]
          let luXing = res.data?.[0]?.[1]
          let luChenList = luChen.children?.[0]?.children
          let luXingList = luXing.children
          // 初始化为空
          const waterArr = []
          luChenList.forEach((item) => {
            if (
              item.alias &&
              this.waterNameActive == item.alias.split('-')[0]
            ) {
              waterArr.push(item)
              this.waterNameArr = waterArr
              this.tabsModelId = waterArr[0].id
              this.postOpenVide(waterArr[0].id.split('_')[1])
            }
          })
          luXingList.forEach((it) => {
            it.children.forEach((item) => {
              if (
                item.alias &&
                this.waterNameActive == item.alias.split('-')[0]
              ) {
                if (
                  item.alias &&
                  this.waterNameActive == item.alias.split('-')[0]
                ) {
                  this.waterNameArr.push(item)
                }
              }
            })
          })
        })
      }
    },
    // 视频监控接口
    postOpenVide(pid) {
      postOpenVideUrl({
        origin: 'http://10.204.171.95',
        channelIdQueryList: [pid],
      }).then((res) => {
        let url = res.data[0][0]?.playUrl
        this.videUrl = url
      })
    },
    openClick() {
      // this.editableTabsValue = '1'
    },
    // 关闭弹窗清除数据
    openClose() {
      this.dialogVisible = false
      // this.waterNameArr = []
      // this.httpUrl = ''
      // this.videUrl = ''
    },
    // 详情数据关闭
    onClose() {
      this.dialogVisible1 = false
    },
    // 1
    // lonLatToMercator(longitude, latitude) {
    //   var E = longitude
    //   var N = latitude
    //   var x = (E * 20037508.34) / 180
    //   var y = Math.log(Math.tan(((90 + N) * Math.PI) / 360)) / (Math.PI / 180)
    //   y = (y * 20037508.34) / 180
    //   return {
    //     x: x, //墨卡托x坐标——对应经度
    //     y: y, //墨卡托y坐标——对应维度
    //   }
    // },
  },
}
</script>

<style>
#map {
  height: 100vh;
  width: 100%;
}
</style> -->

<template>
  <div>调度总览</div>
</template>

<script>
export default {}
</script>

<style></style>
